<!-- 秒杀列表 -->
<template>
  <view class="page_box seckill-list-wrap" :class="classarr[indexs]">
    <!-- 导航栏 -->
    <shopro-navbar :isBack="true" :backIconColor="'#fff'" :background="background">
      <view class="u-flex-1 u-flex  u-row-center u-col-center" slot="content">
        <view style="color:#ffffff">{{title}}</view>
      </view>
    </shopro-navbar>
    <!-- 顶部商品 -->
    <view class="tab-box u-flex u-row-center">
      <view class="goods-item u-m-b-16"  @tap="toSeckillDetail(topshop.id)">
        <view class="big-goods  u-flex u-p-20 u-col-center">
          <image class="goods-img"  lazy-load fade-show :src="topshop.image" mode="aspectFill"></image>
          <view class=" card-right u-m-l-20 u-flex-col">
            <view class="">
              <view class="goods-title u-ellipsis-1 u-m-t-10 u-m-b-10">
<!--                <view  class="title-tag cu-tag bg-red sm radius u-m-r-10">秒杀</view>-->
                {{ topshop.title }}
              </view>
            </view>

            <view class="u-m-y-20">
              <u-tag v-for="(item,index) in tags" mode="light" :key="index" :text="item" size="mini" type="warning" />
            </view>

            <view class=" u-flex u-row-between u-col-center u-m-t-20">
              <view class="u-flex u-col-bottom font-OPPOSANS">
                <view class="price u-m-r-10">{{ topshop.price }}</view>
<!--                <view class="origin-price">{{ topshop.original_price }}</view>-->
              </view>
              <button class="u-reset-button buy-btn" v-if="title=='限时秒杀'">去抢购</button>
              <button class="u-reset-button yushou-btn" v-if="title=='预售专区'">提醒</button>
              <button class="u-reset-button dazhe-btn" v-if="title=='折上返券'">立即抢</button>

            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 滑动条 -->
    <view class="content_box">
      <view class="tabs-wrap" v-if="title=='折上返券'">
        <scroll-view scroll-x class="tabs-content" enable-flex scroll-with-animation  :scroll-left="scrollLeft">
          <view class="u-row-cetner u-col-center scrolls">
            <view class="tab-item u-flex-col u-col-center u-row-center xianshi-item" v-for="(item, index) in shoptypesList" :key="index" @tap="tabChange(index,item)">
              <view :class="tabCur == index?'is_choose_dazhe':'is_choose_no_dazhe'">{{item.name}}</view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="tabs-wrap" v-if="title=='限时秒杀'">
        <scroll-view scroll-x class="tabs-content" enable-flex scroll-with-animation  :scroll-left="scrollLeft">
          <view class="u-row-cetner u-col-center scrolls">
            <view class="tab-item u-flex-col u-col-center u-row-center xianshi-item" v-for="(item, index) in tabsList" :key="index" @tap="tabChange(index,item)">
              <view class="tab-title u-m-y-6">
                {{ item.show_time_text }}
              </view>
              <view :class="tabCur == index?'is_choose':'is_choose_no'">{{item.show_text}}</view>
            </view>
          </view>
        </scroll-view>
      </view>
      <!--      倒计时-->
      <view class="cutdowntime" v-if="title=='限时秒杀'">
        <view v-if="remainTime" class="u-flex">
          <view class="txt-down-befor">离本场结束</view>
          <view class="txt-down">
            <u-count-down
                :show-days="false"
                :timestamp="remainTime"
                separator-color="#EA465F "
                bg-color="#EA465F "
                color="#fff"
                @timeup="init"
            ></u-count-down>
          </view>
        </view>
        <view v-if="tabCur < tabCurs&&!remainTime">
          <view class="txt-down-befor">本场已结束</view>
        </view>
        <view v-if="tabCur > tabCurs&&!remainTime">
          <view class="txt-down-befor">本场即将开始</view>
        </view>
      </view>
      <view class="scroll-box">
        <search-data
            :title="title"
            :enable="enable"
            :seckilltime="seckilltime"
            :dazhelei="dazhelei"
        ></search-data>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props:{

  },
  data() {
    return {
      isEmpty: false, //无数据
      tabCurrent: 'ing',
      topshop:{},
      enable: false, //是否开启吸顶。
      title:'',
      background: {},
      classarr:['seckill-list-wraps-xianshi','seckill-list-wraps-zheshangzhe','seckill-list-wrap-yushou'],
      indexs:0, //加不同的类名
      tabCur:0,
      tabCurs:0,//现在开始的场次
      tabsList:[],
      shoptypesList:[],
      scrollLeft:0,
      remainTime:'10',
      tags:[],
      seckilltime:'',
      dazhelei:''
    };
  },
  computed: {},
  onReady(){
    this.title = this.$Route.query.title
    if(this.title=='限时秒杀'){
      this.indexs = 0
      this.background = {'background':"#EA465F"}
    }
    if(this.title=='折上返券'){
      this.indexs = 1
      this.background = {'background':"#F3B745"}
    }
    if(this.title=='预售专区'){
      this.indexs = 2
      this.background = {'background':"#7D45F3"}
    }
  },
  onLoad() {
    this.init();
  },
  created(){
    if(this.title=='限时秒杀'){
      // 此方法写在mixin中
      // this.remainTime = this.timeFn(this.finish_time);
      console.log("=====  this.remainTime",  this.remainTime)
      console.log("==========this.title",this.title)
    }
  },
  methods: {
    init(){
      this.getTopGoodsList();
    },
    tabChange(index,item){
      this.tabCur = index;
      this.scrollLeft = (index - 1) * 60;
      if(this.title=='折上返券'){
        if(item){
          this.dazhelei = item.id;
        }else{
          this.dazhelei = this.shoptypesList[this.tabCur].id
        }
      }
      if(this.title=='限时秒杀'){
        console.log("====init",this.tabCur,this.tabCurs)
        if(item){
          this.seckilltime = item.param_time;
          this.remainTime = 0;
          if(item.count_time>0){
            this.remainTime = item.count_time; //活动倒计时
          }
        }else{
          this.seckilltime = this.tabsList[this.tabCur].param_time
        }
        console.log("==== this.seckilltime", this.seckilltime)
      }
    },
    toSeckillDetail(id) {
      this.$Router.push({ path: '/pages/goods/new_detail', query: { id: id } });
    },
    //顶部商品列表
    getTopGoodsList() {
      let that = this;
      that.$https(
          'goods.activity_top',
          {
            token:  uni.getStorageSync("token"),
          },
          '加载中...'
      ).then(res => {
        if (res.code === 1) {
          if(this.title=='限时秒杀'){
            this.topshop = res.data.miaosha_goods;
            if(this.topshop.service){
              let newarr = []
              this.topshop.service.forEach((item1)=>{
                newarr.push(item1.name)
              })
              this.tags=newarr;
            }
            this.tabsList = res.data.miaosha_time;
            this.tabsList.forEach((item,index)=>{
              if(item.is_show){
                console.log("====item",item)
                this.remainTime = item.count_time; //活动倒计时
                this.tabCur = index
                this.tabCurs = index
                this.seckilltime = item.param_time;
                console.log("====this.seckilltime",this.seckilltime)
              }
            })
          }
          if(this.title=='折上返券'){
            this.topshop = res.data.zhekou_goods;
            this.shoptypesList = res.data.zhekou_cate;
            this.dazhelei = this.shoptypesList[this.tabCur].id;
            if(this.topshop.service){
              let newarr = []
              this.topshop.service.forEach((item1)=>{
                newarr.push(item1.name)
              })
              this.tags=newarr;
            }
          }
          if(this.title=='预售专区'){
            this.topshop = res.data.yushou_goods;
            if(this.topshop.service){
              let newarr = []
              this.topshop.service.forEach((item1)=>{
                newarr.push(item1.name)
              })
              this.tags=newarr;
            }
          }
        }
      });
    }
  }
};
</script>

<style lang="scss">
.scroll-box{
  background: transparent!important;
}
.cutdowntime{
  width: 710rpx;
  margin: 16rpx auto 32rpx;
  background: #fff;
  border-radius: 20rpx;
  display: flex;
  height: 100rpx;
  align-items: center;
  justify-content: center;
  .txt-down{
    width: 180rpx;
  }
  .txt-down-befor{
    margin-right: 20rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}
.scroll-box {
  background: linear-gradient(#fff, #f5f5f5);
  width: 100%;
  border-radius: 20rpx;
  margin: 0 auto;
}
.tabs-content{
  white-space: nowrap;
  margin: 14rpx 0 28rpx;
  .scrolls{
    display: flex;
    padding-left: 30rpx;
    flex-wrap: nowrap;
    width: 100%;
  }
}
.xianshi-item{
  width: 180rpx;
  padding-right: 46rpx;
  color:#fff;
  &.last-child{
    padding-right: 0rpx;
  }
  .tab-title{
    font-size: 36rpx;
  }
  .is_choose{
    margin: 8rpx 0;
    padding: 10rpx 16rpx;
    background: #fff;
    color: rgb(234, 70, 95);
    border-radius: 36rpx;
    font-size: 24rpx;
  }
  .is_choose_no{
    opacity: 0.7;
    margin: 8rpx 0;
    padding: 10rpx 16rpx;
    font-size: 24rpx;
  }
  .is_choose_dazhe{
    margin: 8rpx 0;
    padding: 12rpx 27rpx;
    background: #FFF9ED;
    color: #FF9F31;
    border-radius: 36rpx;
    font-size: 26rpx;
  }
  .is_choose_no_dazhe{
    opacity: 0.7;
    margin: 8rpx 0;
    padding: 12rpx 27rpx;
    font-size: 26rpx;
    background: rgba(255,255,255,0.2000);
    border-radius: 36rpx;
  }
}
.xianshi-item:last-child{
  padding-right: 0rpx;
}
// 列表
.goods-item {
  // 大商品卡片
  .big-goods {
    width: 710rpx;
    height: 260rpx;
    background: #ffffff;
    box-shadow: 0px 7rpx 8rpx 1rpx rgba(254, 76, 29, 0.05);
    border-radius: 20rpx;
    .goods-img {
      width: 220rpx;
      height: 220rpx;
      border-radius: 6rpx;
    }
    .card-right {
      width: 430rpx;
    }
    .goods-title {
      font-size: 26rpx;
      font-weight: 600;
      width: 400rpx;
      color: #000000;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .subtitle-text {
      font-size: 22rpx;
      width: 400rpx;
      font-weight: 500;
      color: #666666;
    }
    .buy-btn {
      width: 120rpx;
      line-height: 50rpx;
      background:#ed3c30;
      border-radius: 25rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #ffffff;
      margin: 0;
    }
    .yushou-btn{
      width: 120rpx;
      line-height: 50rpx;
      background: #3A8EFD;
      border-radius: 25rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #ffffff;
      margin: 0;
    }
  .dazhe-btn{
    width: 120rpx;
    line-height: 50rpx;
    border-radius: 25rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    background: linear-gradient(139deg, #F3B745 5%, #FF9E31 100%);
  }
    .progress-text {
      color: #c4c4c4;
      font-size: 20rpx;
      margin-left: 25rpx;
    }
    // 价格
    .price {
      color: #ff0000;
      font-weight: 600;
      &::before {
        content: '￥';
        font-size: 20rpx;
      }
    }
    .origin-price {
      color: #c4c4c4;
      font-size: 24rpx;
      text-decoration: line-through;
      &::before {
        content: '￥';
        font-size: 20rpx;
      }
    }
  }

  .buy-btn {
    width: 120rpx;
    line-height: 50rpx;
    background: linear-gradient(90deg, #d01325, #ed3c30);
    border-radius: 25rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #ffffff;
  }
  .btn-end,
  .btn-nostart {
    background: rgba(238, 238, 238, 1);
    color: #999999;
  }
  .btn-ing {
    background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
    box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
    color: rgba(255, 255, 255, 1);
  }
}
.seckill-list-wrap-yushou{
  background: linear-gradient(139deg, #7D45F3 5%, #398EFD 100%);
  min-height: 100%;
}
.seckill-list-wraps-xianshi{
  background: linear-gradient(139deg, #EA465F 0%, #E8472B 100%);
  min-height: 100%;
}
.seckill-list-wraps-zheshangzhe{
  background:  linear-gradient(139deg, #F3B745 5%, #FF9E31 100%);
  min-height: 100%;
}
/deep/.u-mode-light-warning{
  background-color: #fdf6ec;
  color: #ff9900;
  padding: 10rpx;
  border:0px solid #fcbd71!important;
  margin-right: 10rpx;
}

</style>
